<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../libs/vue.js"></script>
    <script src="../libs/vue.route.js"></script>
    <style>
        .box {
            width: 50%;
            height: 300px;
            border: 1px solid #999;
            border-radius: 10px;

        }

        .router-link-exact-active,
        .router-link-active {
            width: 100px;
            font-size: 30px;
            font-weight: bold;
            color: #f50;
        }
    </style>
</head>

<body>
    <div id="app">
        <h2>{{title}}</h2>
        <!-- 5 路由出口 -->
        <router-view class="box"></router-view>
        <!-- 路由跳转 -->
        <router-link to="/home?uid=2116&name=moqi">首页</router-link>
        <router-link to="/find/0928">查找</router-link>
        <router-link to="/mine">我的</router-link>
        <!-- <router-link to="/404">首页</router-link> -->
    </div>
    <template id="home">
        <div>
            <h2>HOme = Home = Home </h2>
            <h2>uid--{{$route.query.uid}}</h2>
            <h2>name--{{$route.query.name}}</h2>
        </div>
    </template>
    <template id="find">
        <div>
            <h2>HOme = Find = Find </h2>
            <h2>FIND--{{$route.params.nid}}</h2>
        </div>
    </template>
    <template id="mine">
        <div>
            <h2>Mine - Mine - 个人中心</h2>
            <h2>提示信息--{{$route.meta.isAlive?'需要缓存':'无需缓存'}}</h2>
        </div>
    </template>
</body>
<script>
    //1 定义路由组件
    const Home = {
        template: "#home"
    }
    const Find = {
        template: "#find"
    }
    const Mine = {
        template: "#mine"
    }
    const Notefound = {
        template: "<h2> 404-404 - NotFound </h2>"
    }
    //2 定义路由
    const routes = [
        { path: '/home', component: Home },
        { path: '/find/:nid', component: Find },
        { path: '/mine', component: Mine, meta: { isAlive: true } },
        { path: '/404', component: Notefound, name: 'notfound' },
        {
            path: "*",
            redirect: {
                name: "notfound"
            }
        }
    ]
    //3 创建路由实例并传递''routes'配置
    const router = new VueRouter({
        routes
    })
    //挂载到跟实例
    const vm = new Vue({
        // el:"#app",
        components: {
        },
        router,
        data: {
            title: "Vue 路由!!! ",
            msg: "小型、独立和通常可复用的组件构建大型应用",
            flag: true,
            cname: "mytable"
        },
        mounted() {
            document.getElementsByTagName('title')[0].innerHTML = this.title
        }
    }).$mount("#app")
</script>

</html>